<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/1.2.2/axios.min.js"></script>
  </head>
  <body>
    <button id="btn">发送请求</button>
    <script>
      const oBtn = document.getElementById("btn");
      //创建axios实例
      const myAxios = axios.create({
        baseURL: "http://gmall-h5-api.atguigu.cn",
        timeout: 10000,
        headers: {},
      });

      /* 
        请求拦截器补充:
          请求拦截器可以设置多个,并且会按照书写倒序依次执行
          请求拦截器的失败处理函数主要是用来处理上一次执行的请求拦截器中的失败信息
        
        响应拦截器补充:
          请求拦截器一直失败,则不再发送请求,直接进入响应拦截器的失败处理函数


        为什么拦截器的成功是返回一个值,而失败是返回一个失败的promise实例???
          因为axios的拦截器函数其实都是作为axios的then方法中执行的
          then中如果直接返回一个值,则默认是成功的promise,值为返回的值
          then中想要返回一个失败的promise,只能在then的回调函数中return一个失败的promise

      */

      // 添加请求拦截器1
      myAxios.interceptors.request.use(
        function (config) {
          // 在发送请求之前做些什么
          console.log("请求拦截器1的成功函数");

          return config;
        },
        function (error) {
          // 对请求错误做些什么

          console.log("请求拦截器1的失败函数");

          return Promise.reject(error);
        }
      );
      // 添加请求拦截器2
      myAxios.interceptors.request.use(
        function (config) {
          // 在发送请求之前做些什么
          console.log("请求拦截器2的成功函数");

          return config;
        },
        function (error) {
          // 对请求错误做些什么

          console.log("请求拦截器2的失败函数");

          return Promise.reject(error);
        }
      );
      // 添加请求拦截器3
      myAxios.interceptors.request.use(
        function (config) {
          // 在发送请求之前做些什么
          console.log("请求拦截器3的成功函数");

          throw new Error("请求拦截器3中出现了错误");

          return config;
        },
        function (error) {
          // 对请求错误做些什么

          console.log("请求拦截器3的失败函数");

          return Promise.reject(error);
        }
      );

      // 添加响应拦截器
      myAxios.interceptors.response.use(
        function (response) {
          // 对响应数据做点什么
          return response;
        },
        function (error) {
          // 对响应错误做点什么

          console.log("响应拦截器错误处理函数");

          return Promise.reject(error);
        }
      );

      oBtn.onclick = function () {
        myAxios.get("/admin/product/getCategory1");
      };
    </script>
  </body>
</html>
